<template>
    <div class="article-container">
        <!--文章标题-->
        <div class="header-box">
            <slot name="header"></slot>
        </div>
        <!--文章内容-->
        <div class="content-box" msg="这里不会被传递到father中去">
            <slot name="content" msg="这里会被传递过去" :userInfo="userInfo"></slot>
        </div>

        <!--文章作者-->
        <div class="footer-box">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Article",
        data(){
            return {
                userInfo:{
                    name:'张三',
                    age:18
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .article-container{
        > div{
            min-height: 150px;
        }
        .header-box{
            background-color: #a6e1ec;
        }
        .content-box{
            background-color: #985f0d;
        }
        .footer-box{
            background-color: #ce8483;
        }
    }
</style>
